@import "variables", "utilities";

.action-bar ~ [class*="tab-"] {
  top: 48px;
}

.tab-fixed {
  @include absolute-position(initial, 0, initial, 0);
  @include box-shadow(0, 2px, 6px, rgba(0, 0, 0, 0.25));

  display: block;
  z-index: 1;
  height: $bar-height;
  background: $tab-bar-background-color;

  -webkit-backface-visibility: hidden;

  ul.tab-inner {
    @include flexbox;

    width: 100%;
    list-style: none;

    li {
      @include box-flex(1);

      whitespace: nowrap;
      overflow: hidden;
      text-align: center;

      a {
        @include box-sizing(border-box);

        position: relative;
        display: block;
        height: $bar-height;
        color: $tab-bar-icons-color;
        overflow: hidden;
        text-transform: uppercase;
        text-overflow: ellipsis;
        font-size: 11px;
        font-weight: bold;
        line-height: 52px;

        &:after {
          position: absolute;
          content: '';
          width: 1px;
          height: 24px;
          top: 13px;
          right: 0;
          background-color: lighten($tab-bar-background-color, 10%);
        }
      }

      &:last-child a {
        border-right-width: 0;
      }

      &:active {
        background-color: $background-highlight-color;
      }

      &.active {
        a {
          border-bottom: 5px solid $primary-color;
        }
      }

      &:last-child a:after,
      &:active a:after {
        background-color: transparent;
      }
    }
  }
}

[class|="tab"] ul.tab-inner li a [class*="icon-"],
[class|=" tab"] ul.tab-inner li a [class*="icon-"] {
  font-size: 28px;
  line-height: 48px;
}

.tab-slider {
  @include absolute-position(0, 0, 0, 0);

  .tab-item {
    position: absolute;
    display: none;
    width: 100%;
    top: 0;
    bottom: 0;

    -webkit-transition: -webkit-transform 0.1s ease-out;
            transition:         transform 0.1s ease-out;

    -webkit-backface-visibility: hidden;
    -webkit-transform: translate(0, 0, 0);

    &.active,
    &.in-transition {
      display: inline-block;
    }
  }
}